@import "../../../style/public";
.popup-view {
  width: 100%;
  height: 100%;
  &.bgf6 {
    background-color: #f6f6f6;
  }
  .section {
    @include remCalc(padding, 0, 30);
    color: #333;
    .title {
      @include remCalc(font-size, 32);
      @include remCalc(padding, 40, 0, 28, 0);
    }
    .picker-val {
      @include remCalc(font-size, 28);
      background: #f6f6f6;
      border: 1px solid #eeeeee;
      border-radius: 4px;
      @include remCalc(padding, 0, 20);
      @include remCalc(height, 80);
      box-sizing: border-box;
      display: inline-flex;
      align-items: center;
      width: 100%;
      justify-content: space-between;
      i {
        color: #ccc;
      }
    }
  }
  .btn-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    box-sizing: border-box;
    padding: 0;
    @include thin-border(true,true);
    > div {
      flex: 1;
      @include remCalc(font-size, 36);
      @include remCalc(height, 88);
      @include remCalc(line-height, 88);
      text-align: center;
      & + div {
        background: #459dff;
        color: #fff;
        &::before{
          border-color: #459dff;
        }
        &::after{
          border-color: #459dff;
        }
      }
      background: #fff;
      color: #459dff;
    }
  }
  .check-list{
    @include remCalc(margin-top, 15);
    .check-list_label {
      display: flex;
      position: relative;
      color: #333;
      background-color: #fff;
      justify-content: center;
      align-content: center;
      @include remCalc(font-size, 28);
      @include remCalc(padding, 15, 30);
      > * { pointer-events: none; }
      &:nth-of-type(n+2) {
        @include thin-border(false, false, top);
      }
      .mint-checkbox {
        display: flex;
        justify-content: center;
        align-content: center;
        .mint-checkbox-core {
          top: 50%;
          transform: translate(0, -50%);
          background-color: transparent;
          border-width: 0;
          &:after {
            border-color: #26a2ff;
            top: 0px;
            left: 0px;
            width: 8px;
            height: 16px;
          }
        }
      }
      .checklist-wrapper {
        flex: 1;
        .mint-checkbox-label:nth-of-type(1) {
          @include remCalc(margin-bottom, 5);
        }
      }
    }
  }
  .gray {
    color: #999;
    @include remCalc(font-size, 24);
  }
}